<template>
  <!-- 人工入账 -->
  <div class="financeManualentry" v-loading="loading">
    <h3>人工入账</h3>
    <AreaWarp :padding="true">
      <SearchWarp :label="'姓名'">
        <el-input v-model.trim="searchInfo.realName" placeholder="请输入用户姓名"></el-input>
      </SearchWarp>
      <SearchWarp :label="'手机号'">
        <el-input v-model.trim="searchInfo.mobile" maxlength="11" placeholder="请输入手机号码"></el-input>
      </SearchWarp>
      <SearchWarp :label="'放款时间'">
        <el-date-picker
          v-model="searchInfo.time"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :editable="false"
        ></el-date-picker>
      </SearchWarp>
      <BtnWarp>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
      </BtnWarp>
    </AreaWarp>

    <AreaTitleWarp :title="'订单列表'"></AreaTitleWarp>

    <!--搜索结果区域-->
    <AreaWarp :padding="false">
      <el-table
        size="mini"
        :data="tableInfo.list"
        style="width: 100%"
        class="pub-table"
        header-row-class-name="pub-table-header-row"
        header-cell-class-name="pub-table-header-cell"
        tooltip-effect="dark"
      >
        <el-table-column prop="id" label="订单ID" ></el-table-column>
        <el-table-column prop="appId" label="产品" :formatter="formatter_product"></el-table-column>
        <el-table-column prop="realname" label="姓名"></el-table-column>
        <el-table-column prop="mobile" label="手机号" min-width="120"></el-table-column>
        <el-table-column prop="realCapital" label="放款本金"></el-table-column>
        <el-table-column
          prop="payTime"
          label="放款时间"
          min-width="150"
          :formatter="formatter_timeYMDHMS"
        ></el-table-column>
        <el-table-column
          prop="lastRepayDay"
          label="到期时间"
          min-width="150"
          :formatter="formatter_timeYMDHMS"
        ></el-table-column>
        <el-table-column prop="totalPrice" label="应还款金额"></el-table-column>
        <el-table-column prop="repayPirce" label="已还款金额"></el-table-column>
        <el-table-column v-if="addShow" prop="borrowId" label="操作" min-width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="entryMoney(scope.row)">人工入账</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total,sizes,prev, pager, next, jumper"
        class="pub-page"
        :current-page="searchInfo.page"
        :page-sizes="[20,50,100]"
        :page-size="searchInfo.size"
        :total="tableInfo.total"
        @current-change="search"
        @size-change="handleSizeChange"
      ></el-pagination>
    </AreaWarp>

    <el-dialog
      title="人工入账"
      :visible.sync="dialogVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="50%"
      @close="entryCancel"
    >
      <div class="dialog-body">
        <ul class="body-message" v-if="entryMoneyData">
          <li>
            <span class="span1">借款本金:</span>
            <span class="span2">{{ entryMoneyData.realCapital }}</span>
          </li>
          <li>
            <span class="span1">应还款金额:</span>
            <span class="span2">{{ entryMoneyData.totalPrice }}</span>
          </li>
          <li>
            <span class="span1">已还款金额:</span>
            <span class="span2">{{ entryMoneyData.repayPirce }}</span>
          </li>
        </ul>
        <ul class="body-operation">
          <li>
            <span class="span1">人工入账金额:</span>
            <span class="span2">
              <el-input v-model="entryData.thisAmount" placeholder="请输入金额"></el-input>
            </span>
          </li>
          <li>
            <span class="span1">还款方式:</span>
            <span class="span2">
              <el-select v-model="entryData.payType" placeholder="请选择">
                <el-option
                  v-for="item in payTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </span>
          </li>
          <li>
            <span class="span1">是否操作结案:</span>
            <span class="span2">
              <el-checkbox v-model="entryData.payFlag"></el-checkbox>
            </span>
          </li>
          <li>
            <span class="span1">还款时间:</span>
            <span class="span2">
              <el-date-picker
                v-model="entryData.repaySuccessTimestamp"
                type="datetime"
                placeholder="选择日期时间"
              ></el-date-picker>
            </span>
          </li>
          <li>
            <span class="span1">备注:</span>
            <span class="span2">
              <el-input
                maxlength="20"
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="entryData.remark"
              ></el-input>
            </span>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="entryCancel">取 消</el-button>
        <el-button type="primary" @click="entrySure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Finance from "../../../assets/js/finance.js";
export default {
  data() {
    return {
      searchInfo: {
        realName: "",
        mobile: "",
        time: "",
        size: 20,
        page: 1
      },
      loading: false,
      statusOptions: [],
      payTypeOptions: [
        {
          value: 2,
          label: "支付宝"
        },
        {
          value: 3,
          label: "微信"
        },
        {
          value: 1,
          label: "银行卡"
        }
      ],
      tableInfo: {
        list: [],
        total: 0,
        page: 0,
        size: 0
      },
      dialogVisible: false,
      entryMoneyData: null,
      entryData: {
        remark: "",
        repaySuccessTimestamp: "",
        payFlag: false,
        payType: 2,
        thisAmount: ""
      },
      addShow: false
    };
  },
  methods: {
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    search(currentPage) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;
      let x = {
        realName: that.searchInfo.realName,
        mobile: that.searchInfo.mobile,
        size: that.searchInfo.size,
        page: that.searchInfo.page,
        time: that.searchInfo.time
      };
      let finance = new Finance(x);
      let reqData = finance.getState();
      if (reqData.code) {
        that.showMsg(reqData.message, "error");
        return;
      }

      that.loading = true;
      that.ajaxJson({
        url: "/finance/list",
        data: reqData,
        success: function(res) {
          if (res.code == "0") {
            that.tableInfo = res.data;
          }
          that.loading = false;
        }
      });
    },
    reset() {
      let that = this;
      that.searchInfo = {
        realName: "",
        mobile: "",
        time: "",
        size: 20,
        page: 1
      };
      that.search();
    },
    entryMoney(row) {
      // 入账弹框
      let that = this;
      that.entryMoneyData = row;
      that.dialogVisible = true;
    },
    entryCancel() {
      let that = this;
      that.entryMoneyData = null;
      that.entryData = {
        remark: "",
        payFlag: false,
        payType: 2,
        thisAmount: "",
        repaySuccessTimestamp: ""
      };
      that.dialogVisible = false;
    },
    entrySure() {
      let that = this;
      if (!/^[0-9]+(.[0-9]{1,2})?$/.test(that.entryData.thisAmount)) {
        that.showMsg("请输入正确的金额", "error");
        return;
      }
      let payFlag = 0;
      if (that.entryData.payFlag) {
        payFlag = 1;
      } else {
        payFlag = 0;
      }

      let repaySuccessTimestamp = [];
      if (!that.entryData.repaySuccessTimestamp) {
        that.showMsg("请选择时间", "error");
        return;
      } else {
        repaySuccessTimestamp = that.entryData.repaySuccessTimestamp.getTime();
      }
      let addX = {
        borrowId: that.entryMoneyData.id,
        mobile: that.entryMoneyData.mobile,
        userId: that.entryMoneyData.userId,
        userName: that.entryMoneyData.realname,
        thisAmount: that.entryData.thisAmount,
        payType: that.entryData.payType,
        repaySuccessTimestamp: repaySuccessTimestamp,
        payFlag: payFlag,
        remark: that.entryData.remark
      };

      that.ajaxJson({
        url: "/finance/add",
        data: addX,
        success: function(res) {
          if (res.code == "0") {
            that.$message({
              type: "success",
              message: "入账成功!"
            });
            that.entryData = {
              remark: "",
              payFlag: false,
              payType: 2,
              thisAmount: "",
              repaySuccessTimestamp: ""
            };
            that.dialogVisible = false;
            that.entryMoneyData = null;
            that.search();
          }
        }
      });
    },
    isAddShow() {
      let that = this;
      let isAddShow = that.urlPermissions().indexOf("/finance/add");
      if (isAddShow == "-1") {
        that.addShow = false;
      } else {
        that.addShow = true;
      }
    }
  },
  created() {
    let that = this;
    Promise.all([that.isAddShow()]).then(arr => {
      that.search();
    });
  },
  beforeCreate() {
    let that = this;
  }
};
</script>
<style lang="less">
.financeManualentry {
  .inputWidth {
    width: 120px;
  }
  .dialog-body {
    width: 100%;
    .body-message {
      width: 100%;
      overflow: hidden;
      li {
        width: 33.3%;
        float: left;
        line-height: 30px;
        .span1 {
          color: #999;
        }
        .span2 {
          color: #000;
        }
      }
    }
    .body-operation {
      margin-top: 20px;
      li {
        display: flex;
        line-height: 40px;
        margin-bottom: 10px;
        .span1 {
          width: 120px;
          flex: none;
          color: #999;
          text-align: right;
        }
        .span2 {
          flex: 1;
          margin-left: 20px;
          .el-input {
            width: 50% !important;
          }
          .el-select {
            .el-input {
              width: 100% !important;
            }
          }
          .el-input__inner {
            width: 100%;
            height: 36px;
            padding: 0 5px;
          }
          .el-input--prefix {
            .el-input__inner {
              padding-left: 30px;
            }
          }
          .el-checkbox__inner {
          }
          .el-input__prefix {
          }
        }
      }
    }
  }
}
</style>
